<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
        样式类的名称，如果是多个单词，可使用驼峰或中划线间隔
        */
        .fz40 {
            font-size: 40px;
        }
        .bgc {
            background-color: blue;
        }
        .font-red {
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>Class样式</h1>
        <h2>原始方式</h2>
        <p class="fz40 bgc font-red">{{message}}</p>
        <h2>对象方式</h2>
        <!-- 
        动态class属性，它的值是一个对象
        属性名为样式类的名称，值为boolean，true表示当前样式生效，false表示样式不生效
        注意：如果样式类名中有中划线，对象的属性名需要适应引号包裹
        -->
        <p :class="{fz40: true, bgc: true, 'font-red': true}">{{message}}</p>
        <p :class="obj">{{message}}</p>
        <h2>数组方式</h2>
        <!-- 
        将样式类名以字符串的格式，放入到一个数组中
        -->
        <p :class="['fz40', 'font-red', 'bgc']">{{message}}</p>
    </div>
    <script src="./assets/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                message: 'hello vuejs',
                obj: {
                    fz40: true,
                    bgc: true,
                    'font-red': true
                }
            }
        });
    </script>
</body>
</html>